<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作  针对css3、添加、移除、切换的元素"类名"操作
		 addClass()       有参：1个参和多个参
		                  语法：addClass("类名")
						  <p class="类名">
						  语法：addClass("类名1 类名2")
						  <p class="类名1 类名2">
						  功能：匹配元素集合中的所有元素
						        添加一个或者多个类名操作
							理解：给元素添加存在的样式	
		 removeClass()   功能：匹配元素集合中的所有元素
						        移除一个或者多个类名操作
		 toggleClass()   功能：如果元素有类名就移除 没有则添加
		 hasClass()      功能：检查匹配元素集合中是否包含指定类名  返回值bool
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
		<style>
			 .bgColor{
				 width: 300px;
				 height: 300px;
				 background: #55ffff;
				 }
			 .borders{
				 border: 10px solid red;
				 border-radius: 50%;
				 }
			 </style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn"> 添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			// 1.点击 添加类名 按钮  添加效果【样式】 300*300 背景色：青色
			$("#addClassBtn").click(function(){
				// div添加样式---存在样式：类名
				$("#targetElement").addClass("bgColor");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
			});
			// 2.点击 添加类名 按钮   添加效果【样式】
			// 300*300 背景色红色 圆 外层 10px
			$("#addClassBtn").click(function(){
				// div添加样式---存在样式：类名
				$("#targetElement").addClass("bgColor borders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
			});
			
			// 3.点击 移除类名 按钮   
			$("#removeClassBtn").click(function(){
				// div添加样式---存在样式：类名
				$("#targetElement").removeClass("borders");
				$("#resultArea").html("<h4>移除样式类名：bgColor</h4>")
			});
			
			// 4.点击 切换类名 按钮 添加效果【样式】
			// 300*300 背景色红色 圆 外层 10px 黄色框
			$("#toggleClassBtn").click(function(){
				// div添加样式---存在样式：类名
				$("#targetElement").toggleClass("borders");
				$("#resultArea").html("<h4>切换样式类名：bgColor</h4>")
			});
			
			
			// 5.点击 切换类名 按钮 添加效果【样式】
			// 300*300 背景色红色 
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("bgColor");
				$("#resultArea").html("<h4>切换样式类名：bgColor</h4>")
			});
			
			// 6.检查类名是否存在：ture存在  false不存在
			$("#hasClassBtn").click(function(){
			var hc=$("#targetElement").hasClass("borders");
				$("#resultArea").text("检查当前样式是否存在："+hc);
			});
		</script>
	</body>
</html>